<!-- 开发中 -->
<template>
  <div class="page-submitform">
    <BaseForm v-bind="props.config" v-model="formData" ref="baseFormRef">
      <template #footer>
        <div class="handle-btns">
          <el-button type="primary" @click="submit">
            <Edit style="width: 1em; height: 1em; margin-right: 5px" />
            提交
          </el-button>
          <el-button @click="cancel">
            <Close style="width: 1em; height: 1em; margin-right: 5px" />
            取消
          </el-button>
        </div>
      </template>
    </BaseForm>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import BaseForm from "./base-ui/BaseForm.vue";
import { Edit, Close } from "@element-plus/icons-vue";
const emit = defineEmits(["submit", "cancel"]);

const props = defineProps({
  config: {
    //v-model的字段,父组件传来的
    type: Object,
    require: true,
    default: () => ({})
  },
  transferData: {
    //v-model的字段,父组件传来的
    type: Object,
    require: true,
    default: () => ({})
  }
});
const baseFormRef = ref(null);
// 1.优化一: 加载字段
//2.优化二: 加载数据
const formData = ref({
  ...props.transferData
});

// 3.优化三: 当用户点击搜索
const submit = () => {
  baseFormRef.value.elformRef.validate(valid => {
    if (valid) {
      emit("submit", formData.value);
    } else {
    }
  });
  //emit('submit', formData.value)
};
const cancel = () => {
  emit("cancel");
};
</script>

<style scoped>
.header {
  color: red;
}
.handle-btns {
  padding: 0 50px 20px 0;
  text-align: center;
}
.page-submitform {
  height: 100%;
}
</style>
